<template>
  <div class="height-100pc mx-3 goods-home">
    <v-row justify="center" class="my-3">
      <template v-for="(item, itemIndex) in indicators">
        <v-col :key="itemIndex" cols="12" md="3">
          <v-hover v-slot="{ hover }">
            <v-card
                class="item-card"
                :elevation="hover ? 12 : 2"
                :class="{ 'on-hover': hover }"
            >
              <v-row class="mx-3 ">
                <v-col md="6" class="align-center">
                  <v-icon :color="item.color" size="100">{{
                      item.icon
                    }}
                  </v-icon>
                </v-col>
                <v-col md="6" class="align-center justify-center flex-column ">
                  <div class="text-h5 text-center">{{ item.title }}</div>
                  <div class="text-h7 text-center">{{ item.text }}</div>
                </v-col>
              </v-row>
            </v-card>
          </v-hover>
        </v-col>
      </template>
    </v-row>

    <div>
      <v-card class="mt-9" v-if="chartLoaded">
        <v-row class="ml-3">
          近7天业务量
        </v-row>
        <line-chart
            width="98%"
            :chart-data="lineChartData"
            :indicators="lineChartIndicators"
            :dimension="dimension"
        ></line-chart>
      </v-card>
    </div>
  </div>
</template>

<script>
import {getHomePanels, getWeekAnalysis} from "@/api/goods";
import LineChart from "@/view/goods/home/LineChart";

const lineChartData = {
  purchases: [100, 120, 161, 134, 105, 160, 165],
  sales: [120, 82, 91, 154, 162, 140, 145],
  expenses: [110, 70, 150, 50, 46, 80, 111],
  profits: [99, 55, 110, 67, 88, 44, 76],
};
const DEFAULT_PANELS = [
  {icon: "mdi-dolly", color: "blue", title: "商品", text: "4(件)"},
  {
    icon: "mdi-cart-arrow-up",
    color: "cyan",
    title: "总销售额",
    text: "1100.00（元）",
  },
  {
    icon: "mdi-cash-refund",
    color: "red",
    title: "支出",
    text: "568.20（元）",
  },
  {
    icon: "mdi-currency-cny",
    color: "amber",
    title: "利润",
    text: "-368.20（元）",
  },
];
export default {
  name: "GoodsHome",
  components: {
    LineChart,
  },
  data: () => ({
    lineChartData,
    indicators: DEFAULT_PANELS,
    lineChartIndicators: ["采购额", "销售额", "支出", "利润"],
    dimension: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    chartLoaded: false,
  }),
  mounted() {
    getHomePanels()
        .then((homePanels) => {
          this.indicators = homePanels;
        })
        .catch((err) => {
          console.warn(err);
        });

    getWeekAnalysis()
        .then((result) => {
          this.lineChartIndicators = result.indicators;
          this.dimension = result.dimension;
          this.lineChartData = {
            purchases: result.data[0],
            sales: result.data[1],
            expenses: result.data[2],
            profits: result.data[3],
          };
          this.$nextTick(() => {
            this.chartLoaded = true;
          });
        })
        .catch((err) => {
          console.warn(err);
          this.chartLoaded = true;
        });
  },
};
</script>

<style>
.item-card {
  transition: opacity 0.4s ease-in-out;
}

.item-card:not(.on-hover) {
  opacity: 0.6;
}

.line-chart {
  background: #fff;
}
</style>
